const { resolve } = require('path')
// 引入打包html文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// webpack配置文件
// webpack配置文件解析以及源代码编译都是在node环境中执行的
module.exports = {
  entry: './src/index.js', //配置入口文件
  output: {
    //配置出口
    path: resolve(__dirname, 'build'), //注意: path必须是绝对路径
    filename: './js/app.bundle.js',
    clean: true, //每次打包的时候,会先清空build文件夹
    // 定义静态资源打包之后的文件夹的路径和文件名
    assetModuleFilename: 'images/[hash:8][ext]',
  },
  mode: 'development', //模式: production(生产,会压缩代码), development(开发,不会压缩代码)
  //配置loader
  module: {
    rules: [
      // 使用eslint-loader帮我们检查js语法规范
      {
        test: /\.js$/, // 只检测js文件
        exclude: /node_modules/, // 排除node_modules文件夹
        // 默认rules里面的loader执行顺序是从后往前.设置了enforce就跳出了书写位置的顺序限制
        enforce: 'pre', //可能值: "pre" | "post". pre表示前置执行, post表示后置执行
        use: {
          // 使用eslint-loader解析
          loader: 'eslint-loader',
        },
      },
      // 使用babel-loader处理js兼容性问题
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },

      // 处理css文件
      {
        test: /\.css$/i,
        // css-loader先执行,将css文件编译之后,以commonjs的形式添加到了js文件中
        // style-loader将app.bundle.js中的css代码,提取出来,以内嵌的形式添加到html文件中
        use: ['style-loader', 'css-loader'],
      },

      // 处理less文件
      {
        test: /\.less$/,
        //less-loader 先执行, 将less编译成css
        // css-loader将css文件编译之后,以commonjs的形式添加到了js文件中
        // style-loader将app.bundle.js中的css代码,提取出来,以内嵌的形式添加到html文件中
        use: ['style-loader', 'css-loader', 'less-loader'],
      },

      // 处理静态资源
      // asset/resource
      // {
      //   test: /\.(png|jpe?g|gif)$/,
      //   type: 'asset/resource',
      // },

      // // 将图片转成base64
      // {
      //   test: /\.svg$/,
      //   type: 'asset/inline',
      // },
      // // 读取文件中的内容
      // {
      //   test: /\.txt/,
      //   type: 'asset/source',
      // },
      // asset就是根据条件,自动渲染asset/resource还是asset/inline
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: 'asset',
        parser: {
          // 判断条件
          dataUrlCondition: {
            maxSize: 3 * 1024, // 小于3kb以下的图片会被打包成base64格式
          },
        },
      },
    ],
  },
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      // template的作用: 将源文件的html当做模板去生成新的html文件
      template: './src/index.html',
    }),
  ],
  // 配置自动开发编译服务器
  // 1. 当我们的源代码发生变化,会自动帮我们调用webpack进行编译
  // 2. 重新编译之后,会自动刷新浏览器展示最新的效果
  devServer: {
    static: {
      directory: resolve('build'), //基于打包后的文件夹作为静态资源服务器的根目录
    },
    port: 9000, //设置端口号
    open: true, //自动打开浏览器
  },
}
